<template>
  <el-container style="margin-top: 10px">
    <el-header>
      <el-card style="height: 75px">
        <div style="display: inline-block;margin-left: 20px">
          <el-input v-model="name" placeholder="姓名" size="mini" style="width: 200px" clearable />
          <el-input v-model="phone" placeholder="手机号码" size="mini" style="width: 200px" clearable />
          <el-input v-model="company" placeholder="公司名称" size="mini" style="width: 200px" clearable />
        </div>

        <el-button
          circle
          type="primary"
          icon="el-icon-search"
          @click="searchTeacher"
        />
      </el-card>
    </el-header>

    <el-main>
      <el-card>
        <el-table v-loading="loading" :data="recordList">
          <el-table-column align="center" prop="name" label="姓名" />
          <el-table-column align="center" prop="company" label="公司" />
          <el-table-column align="center" prop="job" label="职务" />
          <el-table-column align="center" prop="phone" label="手机号" />
          <el-table-column align="center" prop="status_name" label="状态" />
          <el-table-column label="操作" align="center">
            <template v-if="scope.row.status_name == '待处理'" slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="hanldeSure(scope.row.id)"
              >确认</el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-edit"
                @click="hanldeCancel(scope.row.id)"
              >驳回</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-main>

    <el-footer style="height: 85px">
      <el-card>
        <el-pagination
          style="text-align: center;"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          @current-change="handleCurrentChange"
        />
      </el-card>
    </el-footer>
    <el-dialog title="" :visible.sync="dialogVisible" @close="dialogClose">
      <el-form ref="dialog" :model="sureObj" :rules="rule" label-position="" label-width="120px">
        <el-form-item label="学习次数:" prop="study_num">
          <el-input v-model="sureObj.study_num" />
        </el-form-item>
        <el-form-item label="到期时间:" prop="end_date">
          <el-date-picker
            v-model="sureObj.end_date"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button :disabled="disabled" type="primary" class="iconfont iconicon_add" @click="confirmOrder">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
import { getOrderList, cancelOrder, confirmOrder } from '@/api/otherAPI.js'
export default {
  data() {
    return {
      disabled: false,
      sureObj: {
        study_num: '',
        end_date: '',
        order_id: ''
      },
      rule: {
        study_num: [
          { required: true, message: '请输入学习次数', trigger: 'blur' }
        ],
        end_date: [
          { required: true, message: '请选择到期时间', trigger: 'blur' }
        ]
      },
      loading: false,
      dialogVisible: false,
      query_field: '',
      recordList: [],
      total: 0,
      page: 1,
      pageSize: 10,
      name: '',
      phone: '',
      company: ''
    }
  },
  mounted() {
    this.getOrderList()
  },
  methods: {
    confirmOrder() {
      this.$refs.dialog.validate(valid => {
        if (!valid) {
          return false
        }
        this.disabled = true
        confirmOrder(this.sureObj).then(res => {
          this.$message.success(res.msg)
          this.dialogVisible = false
          this.getOrderList()
        }).catch(err => {
          this.dialogVisible = false
        })
      })
    },
    dialogClose() {
      this.disabled = false
      this.sureObj = {
        study_num: '',
        end_date: ''
      }
    },
    searchTeacher() {
      this.getOrderList()
    },
    getOrderList() {
      this.loading = true
      const params = {
        query_field: this.query_field,
        page: this.page,
        page_size: this.pageSize,
        phone: this.phone,
        company: this.company,
        name: this.name
      }
      getOrderList(params).then(res => {
        this.recordList = res.data.list
        this.total = res.data.paginate.total
        this.loading = false
      }).catch(res => {
        this.loading = false
      })
    },
    handleCurrentChange(e) {
      this.page = e
      this.getOrderList()
    },
    hanldeSure(id) {
      this.sureObj.order_id = id
      this.dialogVisible = true
    },
    hanldeCancel(id) {
      this.$confirm('确认驳回,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 如果点击了确定 则执行的逻辑
        const obj = { order_id: id }
        cancelOrder(obj).then(res => {
          this.$message.success(res.msg)
          this.getOrderList()
        })
      })
    }
  }
}
</script>

<style>
</style>
